<template>
    <div>

<el-form :inline="true" :model="info" class="demo-form-inline">
    <el-form-item label="标题">
   <el-input v-model="info.title" placeholder="标题"></el-input>
 </el-form-item>
 <el-form-item label="企业名">
   <el-autocomplete
      class="inline-input"
      v-model="info.enterpriseName"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
 </el-form-item>
 <el-form-item label="城市">
   <el-cascader :options="cityList" :props="{ label: 'cityName',value:'cityId' }"    @change="handleChange"  :show-all-levels="false">
   </el-cascader>
 </el-form-item>
    <el-form-item label="种类">
   <el-select v-model="info.occupationId" placeholder="请选择种类">
      <el-option v-for="(item,index) in occpationList " :key="index" :label="item.name" :value="item.id"></el-option>
    </el-select>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="condition()">查询</el-button>
   <el-button type="primary" @click="add()">添加</el-button>
   <el-button icon="el-icon-delete" type="primary" @click="info={}">清空</el-button>
 </el-form-item>
 </el-form>

         <!-- 表格   -->
    <el-table
    :data="page.records"
    border
    style="width: 95%;">
        <el-table-column
        prop="id"
        label="ID"
        width="80">
        </el-table-column>
        <el-table-column
        prop="title"
        label="标题"
        width="150">
        </el-table-column>
        <el-table-column
        prop="peopleNum"
        label="人数"
        width="80">
        </el-table-column>
        <el-table-column
        prop="tbCity.cityName"
        label="城市"
        width="80">
        </el-table-column>
        <el-table-column
        prop="tbEnterprise.name"
        label="企业"
        width="140">
        </el-table-column>
         <el-table-column
        prop="tbOccupation.name"
        label="种类"
        width="80">
        </el-table-column>
        <el-table-column
        prop="isshow"
        label="薪资"
         width="150">
        <template slot-scope="scope">
            <el-tag>{{scope.row.minSalary}}k</el-tag> - 
            <el-tag>{{scope.row.maxSalary}}k</el-tag>
        </template>
        </el-table-column>

         <el-table-column
        prop="isshow"
        label="福利"
         width="240">
        <template slot-scope="scope">
            <el-tag style="margin-left:3px" v-for="(item,index) in scope.row.welfares" :key="index" >{{item.welfareName}}</el-tag>
        </template>
        </el-table-column>

        <el-table-column
        prop="createTime"
        label="创建时间"
         width="150">
        </el-table-column>
         <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
          size="mini"
          type="wargin"
          @click="delById(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>

    </div>
</template>

<script>
import {conditionInfo,delInfoById,selectName,findCity,findAllOccpation} from '@/api/info'
export default {
    data() {
        return {
            info:{},
            page:{
               current:1,
               size:10,
                total:1 
            },
            cityList:[],
            occpationList:[]
        }
    },
    methods: {
      handleSizeChange(val) {
        this.page.size  = val
        this.condition()
        },
        handleCurrentChange(val) {
            this.page.current = val
            this.condition()
        },
        handleChange(value){
            this.info.addressId = value[1]
        },
        async findCity(){
            let {data} = await findCity();
            this.cityList =  data;
        },
        async findAllOccpation(){
            let {data} = await findAllOccpation()
            this.occpationList = data
        },
        async condition(){
            this.info.size = this.page.size
            this.info.current = this.page.current
            let {data} = await conditionInfo(this.info)
            this.page = data
        },
        async delById(id){
            let {message} = await delInfoById(id)
            this.$message.success(message)
            this.condition()
        },
        async querySearch(queryString, cb) {
        let {data} = await selectName(queryString)
        var results = data
        results.forEach(item=>{
          item.value = item.name
        })
        cb(results);
      },
      handleSelect(item) {
            this.info.enterpriseId = item.id
            console.log(this.tbAdvert)
      },
    },
    mounted() {
        this.condition()
        this.findCity()
        this.findAllOccpation()
    },
}
</script>

<style>

</style>